<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head th:replace="component/head :: head"></head>

<body>
	<header th:replace="component/header :: header"></header>

	<!-- Begin page content -->
	<div class="container">
		<div class="row text-center">
			<div class="col-md-1"></div>
			<div class="col-md-2">
				<i class="fas fa-user-check fa-2x"></i>
				<h6>验证身份</h6>
			</div>
			<div class="col-md-2"></div>
			<div class="col-md-2">
				<i class="fas fa-key fa-2x"></i>
				<h6>找回密码</h6>
			</div>
			<div class="col-md-2"></div>
			<div class="col-md-2">
				<i class="fas fa-check-circle fa-2x"></i>
				<h6>完成修改</h6>
			</div>
			<div class="col-md-1"></div>
		</div>

		<div class="progress mt-4 mb-4">
			<div class="progress-bar progress-bar-striped bg-warning"
				role="progressbar" style="width: 50%" aria-valuenow="50"
				aria-valuemin="0" aria-valuemax="100"></div>
		</div>

		<div class="row">
			<div class="col-md-8 offset-md-2">
				<h4 class="text-center">请输入新密码</h4>
				<hr>
				<form class="needs-validation" novalidate
					action="/user/verify-identity-step-c" method="post"
					onsubmit="return verifyPasswordIdentical()">
					<div class="form-group row">
						<div class="col-md-2">
							<label class="col-form-label" for="newPassword">输入新密码：</label>
						</div>
						<div class="col-md-10">
							<input type="password" class="form-control" id="newPassword"
								name="newPassword" required />
						</div>
					</div>
					<div class="form-group row">
						<div class="col-md-2">
							<label class="col-form-label" for="confirmNewPassword">再输入一次：</label>
						</div>
						<div class="col-md-10">
							<input type="password" class="form-control"
								id="confirmNewPassword" name="confirmNewPassword" required />
							<div class="invalid-tooltip">不能为空/两次输入的密码不一致</div>
						</div>
					</div>
					<div class="form-group row">
						<div class="col-md-4 offset-md-4">
							<button type="submit" class="btn btn-primary btn-block">下一步</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- End page content -->

	<footer th:replace="component/footer :: footer"></footer>

	<script>
		function verifyPasswordIdentical() {
			var newPassword = document.getElementById("newPassword").value;
			var confirmNewPassword = document
					.getElementById("confirmNewPassword").value;

			if (newPassword != confirmNewPassword) {
				//验证不通过
				document.getElementById("newPassword").classList
						.remove("is-valid");
				document.getElementById("newPassword").classList
						.add("is-invalid");
				document.getElementById("confirmNewPassword").classList
						.remove("is-valid");
				document.getElementById("confirmNewPassword").classList
						.add("is-invalid");

				return false;
			} else {
				//验证通过
				document.getElementById("newPassword").classList
						.remove("is-invalid");
				document.getElementById("newPassword").classList
						.add("is-valid");
				document.getElementById("confirmNewPassword").classList
						.remove("is-invalid");
				document.getElementById("confirmNewPassword").classList
						.add("is-valid");

				return true;
			}
		}
		// Example starter JavaScript for disabling form submissions if there are invalid fields
		(function() {
			'use strict';
			window.addEventListener('load',
					function() {
						// Fetch all the forms we want to apply custom Bootstrap validation styles to
						var forms = document
								.getElementsByClassName('needs-validation');
						// Loop over them and prevent submission
						var validation = Array.prototype.filter.call(forms,
								function(form) {
									form.addEventListener('submit', function(
											event) {
										if (form.checkValidity() === false) {
											event.preventDefault();
											event.stopPropagation();
										}
										form.classList.add('was-validated');
									}, false);
								});
					}, false);
		})();
	</script>

	<div th:replace="component/footer-lib"></div>
</body>

</html>